@extends('homeLayouts.master')
@push('css')
    <link rel="stylesheet" type="text/css" href="{{asset('org/home/houl')}}/jquery.fancybox-1.3.4.css">
    <link rel="stylesheet" type="text/css" href="{{asset('org/home/houl')}}/style.css">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
@endpush
@section('content')


    <!--轮播图上方导航栏  一栏-->
    <div id="navv" class="navv_ziy">
        <div class="focus">
            <div class="focus-a">
                <div class="fouc-font fouc_font_ziy">
                    <a href="javascript:;">全部商品分类</a>
                </div>
            </div>
            <div class="focus-b">
                <ul>
                    {{--<li><a href="">商城首页</a></li>--}}
                </ul>
            </div>

            {{--左边导航开始--}}

            <!--左边导航结束-->
        </div>
    </div>
    <!--商品详情-->
    <div class="breadcrumbs_container">
        <div class="left_luj">
            <ul>
                @foreach($categorys as$v)
                <li>
                    <a href="javascript:;" title="{{$v['category_name']}}">{{$v['category_name']}}</a>
                    <i class="icon-crumbs-right"></i>
                </li>
                @endforeach
                <li class="active">
                    <a href="javascript:;" title="{{$goods['name']}}">{{$goods['name']}}</a>
                </li>
            </ul>
        </div>
        <div class="right_dianp">
            <div class="ly-stores shops-name">
                <a class="btn-collect ">
                    <i class="icon-collect"></i>
                    <i class="icon-arrow"></i>
                </a>
                <a class="btn-service hide customerService_show"><i></i>在线客服</a>
                <span class="services-score"><b class="star-gray"><i class="star-red" style="width:88.9059333333%"></i></b><em class="score">4.4</em>分</span>
                <a class="name" title="Mistletoe女装旗舰店" href="#" target="_blank">旗舰店</a>

            </div>
        </div>
    </div>
    <div class="gome_container">
        <!--左-->
        <div class="prd_firstscreen_left">
            <!---->
            <div id="magnifier">
                <div class="small-box">
                    <img src="{{$goods['pics'][0]}}" alt="#">
                    <span class="hover"></span>
                </div>
                <div class="thumbnail-box">
                    <div class="list">
                        <ul class="wrapper">
                            @foreach($goods['pics'] as $k=>$v)
                            <li class="item {{$k=0?'item-cur':''}}" data-src="{{$v}}"><img src="{{$v}}" alt="#"></li>
                            @endforeach
                        </ul>
                    </div>
                </div>
                <div class="big-box">
                    <img src="{{$goods['pics'][0]}}" alt="#">
                </div>
            </div>
            <!--<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> -->
            <script src="{{asset('org/home/js')}}/magnifier.js"></script>
            <script>
                $(function () {
                    $('#magnifier').magnifier();
                });
            </script>
            <!---->
            <div class="preview-info">
                <div class="left-btns">
                    <a class="share J-share" href="#">
                        <i class="fa fa-share"></i><em>分享</em>
                    </a>
                    <a class="" href="{{route('home.collection',$goods)}}">
                        @if($goods->isCollected())
                        <i style="color: red;" class="fa fa-heart"></i><em>已收藏</em>
                        @else
                        <i class="fa fa-heart-o"></i><em>收藏商品</em>
                        @endif
                    </a>
                </div>
                <div class="right-btns">
                    <a class="report-btn" href="#">举报</a>
                </div>
            </div>
        </div>
        <!--中-->
        <div class="prd_firstscreen_center">
            <div class="hgroup">
                <h1>{{$goods['name']}}</h1>
            </div>
            <div class="prd_price_1">
                <div class="unitprice">
                    <p>
                        <label class="prd_price_left">原&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价</label>
                        <span class="price xiangq_yuanj"><em>¥</em>{{$goods['price']}}</span>
                    </p>
                    <p>
                        <label class="prd_price_left">促&nbsp;销&nbsp;价</label>
                        <span class="price"><em>¥</em>{{$goods['price']}}</span>
                    </p>
                </div>
                <div class="prd_price_flr">
                    <div class="prd_price_line">|</div>
                    <div class="prd_price_lineright">
                        <p>好评度<em id="haocnt">98%</em></p>
                        <p class="pincnt"><a href="#" class="reduce"><em>55</em>人评价</a></p>
                    </div>
                </div>
            </div>
            <!---->
            <div class="prd_properties">
                <div class="prd_properties_1">
                    <label class="prd_price_left">服&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;务</label>
                    <span>由<a href="#">旗舰店</a>发货并负责售后服务。</span>
                </div>
                <div class="prd-properties-2">
                    <div class="prd_properties_other">
                        @foreach($attrs as $attr)
                        <label class="prdLeft">{{$attr['attr_name']}}</label>
                        <div class="prdRight">
                            @foreach($attr['son'] as $k=>$v)
                            <div class="prdcol">
                                <a href="javascript:;" class="{{in_array($v['id'],$huopin['attrs'])?'select':''}}" hd="{{$v['id']}}" title="{{$v['attr_name']}}" data-alt="{{$v['attr_name']}}">
                                    <span>{{$v['attr_name']}}</span>
                                </a>
                            </div>
                            @endforeach
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <script>
                var huopinId={{$huopin['id']}}
                //抓到prdcol添加点击事件
                $('.prdcol').click(function(){
                    // 使当前选中的元素添加selct属性
                    $(this).find('a').addClass('select');
                    // 使其他兄弟元素移除select属性
                    $(this).siblings('.prdcol').find('a').removeClass('select');
                    // 定义一个空数组用于接受商品属性
                    var attrs=[];
                    // 循环带有select属性的元素,获取他们的id
                    $.each($('.select'),function () {
                        attrs.push($(this).attr('hd'))
                    })
                    // 通过点击获取到的属性值的组合,发送异步请求获取对应的货品数据以及库存
                    $.ajax({
                        url:'/huopin/'+attrs+'/{{$goods['id']}}',
                        method:'get',
                        dataType:'json',
                        success:function(res){
                            // 判断返回值res的真假,获取商品库存
                            // console.log(res);
                            if(!res.data||res.data.kucun==0){
                                $('.add-cart').html('暂无库存')
                                $('.kucuns').html('库存紧剩0件')
                            }else{
                                $('.add-cart').html('加入购物车')
                                $('.kucuns').html('库存剩'+res.data.kucun+'件')
                            }
                            // 判断货品是否有货
                            if(res.data){
                                huopinId=res.data.id
                            }
                        }
                    })
                })
            </script>
            <div class="prd_properties_1 hou_jia">
                <label class="prd_price_left">货&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;源</label>
                <span class="kucuns">库存仅剩 <span class="kucun"></span>件</span>
            </div>
            <style type="text/css">
                .hou_jia{
                    padding:0 10px;
                }
                .kuc_jian{
                    width: 100%;
                    line-height: 25px;
                }
            </style>
            <!---->
            <div class="prd_buttons">
                <div class="count-wrapper" id="btnCount">
                    <input type="text" class="quantity" value="1">
                    <a href="javascript:;" onclick="plus()" class="plus j-gACbtnA">+</a>
                    <a href="javascript:;" onclick="dec()" class="minus j-gACbtn">-</a>
                </div>
                <a href="" class="btn-product btn-addcart">立即购买</a>
                <a href="javascript:;" onclick="addCart()" class="btn-product add-cart">加入购物车</a>
            </div>
            <script>
                function plus() {
                    $('.quantity').val(parseInt($('.quantity').val())+1)
                }
                function dec() {
                    if($('.quantity').val()>1){
                        $('.quantity').val(parseInt($('.quantity').val())-1)
                    }
                }
                function addCart() {
                    // 获取商品id
                    var goods_id= {{$goods['id']}}
                    // 获取货品id
                    var huopin_id=huopinId
                    // 获取货品数量
                    var num=$('.quantity').val()
                    // 跳转加入购物车路由
                    location.href='/cart/addCart/'+goods_id+'/'+huopin_id+'/'+num
                }
            </script>
            <!---->
            <div class="prd-tips wenxintishi_wrap clearfix">
                <p>温馨提示</p>
                <ol class="wenxinti">
                    <li>
                        正品保障；
                        支持7天无理由退货
                    </li>
                </ol>
            </div>
            <!---->
        </div>
        <!--右-->
    </div>

    <!--商品信息结束-->
    <!--详情-->
    <div class="shangp_xiangq_neir_beij">
        <!--left-->
        <div class="shangp_xiangq_left">
            <!---->
            <div class="shangp_xiangq_left_biank">
                <div class="stores-infos">
                    <div class="ly-stores">
                        <h2 class="fix-storesname shops-name" id="store_live800_wrap">
                            <a class="name" title="茂烨旗舰店" href="#" target="_blank">旗舰店</a>
                        </h2>
                        <div class="services-wrapper">
                            <div class="services-stars">
                                服务评分：
                                <span class="star"><i style="width:81.2819333333%">星星</i></span>
                                <span class="score">4.0</span>分
                            </div>
                            <div class="services-score-detail">
                                <p><span class="detail">评分明细</span><span class="contrast">与行业对比</span></p>
                                <div class="describe ">
                                    <p>商品描述：<span>4.15</span><small title="计算规则：（商家得分-同行业平均分）" class="diyu_text">9.93%</small><i class="diyu">箭头</i></p>
                                </div>
                                <div class="logistics">
                                    <p>发货速度：<span>3.96</span><small title="计算规则：（商家得分-同行业平均分" class="diyu_text">15.34%</small><i class="diyu">箭头</i></p>
                                </div>
                                <div class="services">
                                    <p>服务质量：<span>4.08</span><small title="计算规则：（商家得分-同行业平均分））" class="diyu_text">13.08%</small><i class="diyu">箭头</i></p>
                                </div>
                            </div>
                        </div>
                        <div class="btn-group">
                            <a href="#" class="btn-product btn-enter" target="_blank"><i></i>进入店铺</a>
                            <a href="#" class="btn-collect"><i class="sprite-enter"></i>收藏店铺</a>
                        </div>
                    </div>
                </div>
                <!---->
                <div class="dianp_xiao_jiej">
                    <div class="shangj_diz">
                        <p>地址：<span>北京市朝阳区望京soho12层</span></p>
                        <p>联系人：<span>孙悟空</span></p>
                        <p>电话：<span>0523-87686675</span></p>
                        <p>营业时间：<span>09:00至18:00</span></p>
                    </div>
                    <div class="_xq_gogns_jianj">
                        <p>公司简介：</p>
                        <p class="_xq_gogns_jianj_neir">魅CO视觉，主张时尚个性的摄影理念，以独特和新锐的时尚触觉为客户提供性化的摄影服务。追逐时尚，同时更注重情感表达。用最丰<a href="#">[查看更多]</a></p>
                    </div>
                </div>
            </div>
            <!---->
            <div class="shangp_xiangq_left_biank">
                <div class="stores-infos">
                    <div class="ly-stores">
                        <h2 class="fix-storesname shops-name" id="store_live800_wrap">
                            <a class="name" title="本店商品" href="#" target="_blank">本店商品</a>
                        </h2>
                        <ul class="bend_shangp_lieb">
                            <li>
                                <a href="#">
                                    <img src="{{asset('org/home/images')}}/lieb_tupi3.jpg">
                                    <h3>￥58.00</h3>
                                    <p>茵珠麗YinZhuli 春秋季新款韩版居家服女针织棉长袖情</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!---->
            <div class="shangp_xiangq_left_biank">
                <div class="stores-infos">
                    <div class="ly-stores">
                        <h2 class="fix-storesname shops-name" id="store_live800_wrap">
                            <a class="name" title="热门商品" href="#" target="_blank">热门商品</a>
                        </h2>
                        <ul class="bend_shangp_lieb">
                            <li>
                                <a href="#">
                                    <img src="{{asset('org/home/images')}}/lieb_tupi3.jpg">
                                    <h3>￥58.00</h3>
                                    <p>茵珠麗YinZhuli 春秋季新款韩版居家服女针织棉长袖情</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!---->
        </div>
        <!--right-->
        <div class="shangp_xiangq_right">
            <!---->
            <div class="slideTxtBox_1">
                <div class="hd">
                    <ul><li>商品介绍</li><li>售后保障</li><li>商品评价(500+)</li></ul>
                </div>
                <div class="bd">
                    <ul>

                        {!! $goods['content'] !!}

                        <div class="shouh_baoz">
                            <div class="mt">
                                <h3>售后保障</h3>
                            </div>
                            <!---->
                            <div class="mc">
                                <div class="item-detail item-detail-copyright">
                                    <div class="serve-agree-bd">
                                        <dl>
                                            <dt>
                                                <i class="goods"></i>
                                                <strong>卖家服务</strong>
                                            </dt>
                                            <dd>
                                            </dd>
                                            <dt>
                                                <i class="goods"></i>
                                                <strong>正品行货</strong>
                                            </dt>
                                            <dd>
                                                M.S平台卖家销售并发货的商品，由卖家提供发票和相应的售后服务。请您放心购买！<br>
                                                注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若本商城没有及时更新，请大家谅解！
                                            </dd>

                                        </dl>
                                    </div>
                                    <div id="state">
                                        <strong>权利声明：</strong><br>M.S我的商城上的所有商品信息、客户评价、商品咨询、网友讨论等内容，是我们重要的经营资源，未经许可，禁止非法转载使用。
                                        <p><b>注：</b>本站商品信息均来自于合作方，其真实性、准确性和合法性由信息拥有者（合作方）负责。本站不提供任何保证，并不承担任何法律责任。</p>
                                    </div>
                                </div>
                            </div>
                            <!---->
                        </div>
                        <!---->
                        <div class="shouh_baoz_2">
                            <div class="mt"><h3>商品评价</h3></div>
                            <div class="mc">
                                <div class="comment-info J-comment-info">
                                    <div class="comment-percent">
                                        <strong class="percent-tit">好评度</strong>
                                        <div class="percent-con">99<span>%</span></div>
                                    </div>
                                </div>
                                <!---->
                                <div class="ETab">
                                    <div class="tab-main small">
                                        <ol class="filter-list">
                                            <li class="current_xq" data-num="4900"><a href="#">全部评价<em>(4900+)</em></a></li>
                                            <li ><a href="#">晒图<em>(60)</em></a></li>
                                            <li class="J-addComment"><a href="#">追评<em>(8)</em></a></li>
                                            <li><a href="#">好评<em>(4900+)</em></a></li><li>
                                                <a href="#">中评<em>(40+)</em></a></li>
                                            <li><a href="#">差评<em>(20+)</em></a></li>
                                            <li class="comm-curr-sku"><span><input type="checkbox"></span><label>只看当前商品评价</label></li>
                                        </ol>
                                        <div class="_extra_a">
                                            <div class="sort-select">
                                                <div class="current_tc"><span class="J-current-sortType">推荐排序</span><i></i></div>
                                                <div class="others">
                                                    <div class="curr"><span class="J-current-sortType">推荐排序</span><i></i></div>
                                                    <ol>
                                                        <li class="J-sortType-item">推荐排序</li>
                                                        <li class="J-sortType-item">时间排序</li>
                                                    </ol>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--评价列表-->
                            <div class="tab_con">
                                <ol class="replyListWrap">
                                    <li class="oh_de">
                                        <div class="reply-left">
										<span class="detail-star bgiprd">
											<b style="width:100%" class="bgiprd"></b>
										</span>
                                            <p>收货后1天评论</p>
                                            <p><a target="_blank" href="//review.gome.com.cn/P136937461.html">2017-09-22 12:44</a></p>
                                            <p><span>白色 M码</span></p>
                                        </div>
                                        <div class="reply-center">
                                            <p>正品行货，很棒</p>
                                            <div id="content">
                                                <p>
                                                    <a rel="example_group" href="{{asset('org/home/images')}}/example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="{{asset('org/home/images')}}/example/9_s.jpg" /></a>
                                                    <a rel="example_group" href="{{asset('org/home/images')}}/example/10_b.jpg" title=""><img alt="" src="{{asset('org/home/images')}}/example/10_s.jpg" /></a>
                                                    <a rel="example_group" href="{{asset('org/home/images')}}/example/11_b.jpg" title=""><img alt="" src="{{asset('org/home/images')}}/example/11_s.jpg" /></a>
                                                    <a rel="example_group" href="{{asset('org/home/images')}}/example/12_b.jpg" title=""><img class="last" alt="" src="{{asset('org/home/images')}}/example/12_s.jpg" /></a>
                                                </p>

                                            </div>
                                        </div>
                                        <div class="reply-right">
                                            <div class="reply_avatar">
                                                <img src="{{asset('org/home/images')}}/7_170312181624_2.jpg">
                                                <span class="reply_avatar_userName">祢夏了夏天</span>
                                            </div>
                                            <p class="profileGrade"><span class="viplevel">V2会员</span><span class="area">石家庄市</span></p>
                                        </div>
                                    </li>

                                </ol>
                                <div class="com-table-footer">
                                    <div class="ui-page-wrap">
                                        <div class="ui-page">
                                            <a rel="1" class="ui-page-curr" href="#">1</a>
                                            <a rel="2" href="#">2</a>
                                            <a rel="3" href="#">3</a>
                                            <a rel="4" href="#">4</a>
                                            <a rel="5" href="#">5</a>
                                            <a rel="6" href="#">6</a>
                                            <span>...</span>
                                            <a rel="2" class="ui-pager-next" href="#">下一页</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!---->
                            <div class="jkdhfld">
                                <div class="mt"><h3>商品评价</h3></div>
                                <div class="consult-rt">
                                    <table class="consult-form" >
                                        <caption>我要发表咨询</caption>
                                        <tbody><tr id="tr-zxlx">
                                            <th>咨询类型:&nbsp;</th>
                                            <td>
                                                <label class="cst-type" ><input type="radio" value="1" >购买咨询</label>
                                                <label class="cst-type" ><input type="radio" value="2" >促销优惠</label>
                                                <label class="cst-type" ><input type="radio" value="3" >支付问题</label>
                                                <label class="cst-type" ><input type="radio" value="4" >售后咨询</label>
                                            </td>
                                        </tr>
                                        <tr class="consul_type_wrap">
                                            <th>回复方式:&nbsp;</th>
                                            <td>
                                                <div>
                                                    <label class="cst-type" for="consul_site">
                                                        <input type="radio" value="consul_site" name="hffs-type" id="consul_site" checked="checked">网站
                                                    </label>
                                                    <label class="cst-type" for="consul_mail">
                                                        <input type="radio" value="consul_mail" name="hffs-type" id="consul_mail">邮箱
                                                    </label>
                                                    <label class="cst-type" for="consul_weixin">
                                                        <input type="radio" value="consul_weixin" name="hffs-type" id="consul_weixin">微信
                                                    </label>
                                                </div>
                                                <div class="weixin-sm" style="display: none;">
                                                    <div class="img-w">
                                                        <img gome-src="//js.gomein.net.cn/f2eimage/ui/customer_service_weixin.jpg" alt="手机下单更优惠" title="手机下单更优惠">
                                                    </div>
                                                    <div class="text">
                                                        <p>扫描二维码，关注客服中心公众号，我们将为您提供更加快速便捷的咨询服务</p>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr class="consul_type_wrap" id="email-address" style="display: none;">
                                            <th>邮箱地址:&nbsp;</th>
                                            <td>
                                                <input type="text" value="请填写您的邮箱，以便客服回复！" maxlength="50" id="consul_type_text" name="consul_type_text">
                                                <span class="email-error"></span>
                                            </td>
                                        </tr>
                                        <tr id="gm-zxnr">
                                            <th>咨询内容:&nbsp;</th>
                                            <td>
                                                <div class="txt-area-wrap">
                                                    <textarea name="" id="quesTxt" class="txt-area"></textarea>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr id="gm-submit">
                                            <th></th>
                                            <td><a class="consult-smt-btn redlink">提交</a><span class="tips">0/200</span></td>
                                        </tr>
                                        </tbody></table>
                                    <div class="consult-lt">
                                        <dl class="consult-question clearfix">
                                            <dt>常见问题</dt>
                                            <dd>•<a href="#" target="_blank" title="忘记密码如何操作？">忘记密码如何操作？</a></dd>
                                            <dd>•<a href="#" target="_blank" title="如何增强账户安全系数？">如何增强账户安全系数？</a></dd>
                                            <dd>•<a href="#" target="_blank" title="怎么操作商品签收？">怎么操作商品签收？</a></dd>
                                            <dd>•<a href="#" target="_blank" title="如何电话订购？">如何电话订购？</a></dd>
                                            <dd>•<a href="#" target="_blank" title="如何查询商品参数及包装清单？">如何查询商品参数及包装清单？</a></dd>
                                            <dd>•<a href="#" target="_blank" title="商品无货怎么办？">商品无货怎么办？</a></dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                            <!---->
                        </div>
                        <!---->
                    </ul>
                </div>
            </div>
            <script type="text/javascript">jQuery(".slideTxtBox_1").slide({trigger:"click"});</script>
            <!---->
        </div>
    </div>




    <!--商品详情结束-->


    </body>
    </html>


    <script type="text/javascript">
        $(document).ready(function() {
            /*
            *   Examples - images
            */

            $("a#example1").fancybox();

            $("a#example2").fancybox({
                'overlayShow'	: false,
                'transitionIn'	: 'elastic',
                'transitionOut'	: 'elastic'
            });

            $("a#example3").fancybox({
                'transitionIn'	: 'none',
                'transitionOut'	: 'none'
            });

            $("a#example4").fancybox({
                'opacity'		: true,
                'overlayShow'	: false,
                'transitionIn'	: 'elastic',
                'transitionOut'	: 'none'
            });

            $("a#example5").fancybox();

            $("a#example6").fancybox({
                'titlePosition'		: 'outside',
                'overlayColor'		: '#000',
                'overlayOpacity'	: 0.9
            });

            $("a#example7").fancybox({
                'titlePosition'	: 'inside'
            });

            $("a#example8").fancybox({
                'titlePosition'	: 'over'
            });

            $("a[rel=example_group]").fancybox({
                'transitionIn'		: 'none',
                'transitionOut'		: 'none',
                'titlePosition' 	: 'over',
                'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
                    return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                }
            });

            /*
            *   Examples - various
            */

            $("#various1").fancybox({
                'titlePosition'		: 'inside',
                'transitionIn'		: 'none',
                'transitionOut'		: 'none'
            });

            $("#various2").fancybox();

            $("#various3").fancybox({
                'width'				: '75%',
                'height'			: '75%',
                'autoScale'			: false,
                'transitionIn'		: 'none',
                'transitionOut'		: 'none',
                'type'				: 'iframe'
            });

            $("#various4").fancybox({
                'padding'			: 0,
                'autoScale'			: false,
                'transitionIn'		: 'none',
                'transitionOut'		: 'none'
            });
        });
    </script>
@endsection
